<template>
    <div>
        <Header></Header>
        <Banner title="产品中心" p_url="http://hughspartan.top/blog/images/hello.jpg"></Banner>
        <div class="middle">
	        <div class="line">我们的服务产品</div>
	        <div class="content">先进供应链模型，为物流公司、具备较高资质的汽车维修单位，提供全程透明、实时高效的协同管理服务。</div>
            <ul>
                <li>
                    <img class="server-img" src="../assets/img/server-img1.jpg">
                    <div class="service">
                        SAAS平台维保信息全透明、维保质量监管，帮助车队降低车辆维保成本。
                    </div>
                </li>
                <li>
                    <img class="server-img" src="../assets/img/server-img2.jpg">
                    <div class="service">
                        车联网系统，提供行车安全方案。
                    </div>
                </li>
                <li>
                    <img class="server-img" src="../assets/img/server-img3.jpg">
                    <div class="service">
                        车队运营管理系统，标准化、信息化，提升管理。
                    </div>
                </li>
                <li style="margin-right:0px;">
                    <img class="server-img" src="../assets/img/server-img4.jpg">
                    <div class="service">
                        车辆定制化智能维保、以养代修服务。提供专业化维保指导意见，车队司机培训、专家辅导。
                    </div>
                </li>
            </ul>
            <div class="t-fill" style="height:400px"></div>
            <!--循环遍历，展示产品-->
            <div class="mid-info" v-for="item in products" :key="item.id">
                <img class="info-img" :src="item.picture">
                <div class="info-container">
                    <span>{{item.title}}</span>
                    <p>
                        &nbsp;&nbsp;&nbsp;&nbsp;{{item.content}}
                    </p>
                    <a>了解详情>></a>
                </div>
	        </div>
        </div>
        <Footer></Footer>
    </div>
</template>
<script>
import Header from './header.vue'
import Footer from './footer.vue'
import Banner from './banner.vue'
export default {
    components:{
        Header,
        Footer,
        Banner
    },
    created(){
        this.getProduct()
    },
    data(){
        return{
            products:[] //所有产品
        }
    },
    methods:{
        async getProduct(){
            const {data:res}=await this.$http.post("/product/customer/search")
            if(res.flag==0){
                this.products=res.data
            }
        }
    }
}
</script>
<style scoped>
    ul li {
        list-style: none;
    }
    .content{
		width:80%;
        text-align:center;
		margin-left:auto;
		margin-right:auto;
		margin-bottom:40px;
		font-size:20px;
		color:grey;
	}
    .line{
        height:100px;
		width:100%;
		line-height:100px;
		background:white;
		text-align: center;
		font-size:40px;
		font-weight:600;
	}
    .middle{
        background:#f7fcff;
        height:auto;
        width:100%;
    }
    .middle>ul{
        margin:40px auto 0px auto;
        width:80%;
        background:pink;
    }
    .middle>ul>li{
        float:left;
        width:22.7%;
        height:350px;
        margin:10.6px;
        background-color:white;
        border-radius:5px;
        
    }
    .middle>ul>li:hover{
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);
    -moz-box-shadow: 2px 2px 10px #909090;
    -webkit-box-shadow: 2px 2px 10px #909090;
    box-shadow:2px 2px 10px #909090;
    transition: all 0.5s;
    }
    .server-img{
        margin-top:10px;
        width:100%;
        height:150px;
    }
    .service{
        margin:10px auto 0px auto;
        width:80%;
        font-size:20px;
        color:grey;
        text-align: left;
    }
    .mid-info{
        margin:20px auto 20px auto;
        width:78%;
        height:300px;
        background:pink;
        background-image: url(../assets/img/back2.jpg);
        background-size: 100% 100%; 
        background-repeat: no-repeat; 
    }
    .info-img{
        width:33%;
        height:100%;
    }
    .info-container{
        width:66%;
        height:100%;
        float:right;
    }
    .info-container span{
        size:37px;
        font-weight:600;
        line-height:70px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .info-container p{
        color:#666;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        height:82px;
    }
    .info-container a{
        line-height:50px;
        background:white;
        height:50px;
        width:150px;
        display: block;
        text-align:center;
        margin:40px;
        filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);
        -moz-box-shadow: 2px 2px 10px #909090;
        -webkit-box-shadow: 2px 2px 10px #909090;
        box-shadow:2px 2px 10px #909090;
        transition: all 0.5s;
    }
    .info-container a:hover{
        background:#05e768;
        color:white;
    }
</style>